
<template>
  <div>
    <div class="personal-header">
      <div class="personal-header-info">
        <div class="person-img-border">
          <img :src="userInfo.avatar ? userInfo.avatar : '/static/images/person-logo.png'" />
        </div>
        <div class="info">
          <div>- {{ userInfo.nickname || '暂无' }} <span>ID：{{userInfo.id}}</span></div>
          <span class="person-tag tag-status">已报名</span>
       <!--   <span class="person-tag tag-zhiwu1">参赛员</span>
          <span class="person-tag tag-zhiwu2">队长</span> -->
        </div>
        <div class="edit">
          <img src="/static/images/edit.png">
          <span >修改信息</span>
        </div>
      </div>
      <ul class="personal-menu">
        <router-link tag="li" active-class="active" :to="link.path" v-for="link, index in links" :key="index"><i class="perosn-menu-icon" :class="link.ico"></i>{{link.name}}</router-link>
      </ul>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      links: [
        {
          path: '/personal/info', name: '我的信息', ico: 'menu-my-ico'
        },
        {
          path: '/personal/reserve', name: '我的预约', ico: 'menu-yuyue-ico'
        },
        {
          path: '/personal/file', name: '我的文件', ico: 'menu-file-ico'
        },
        {
          path: '/personal/motorcade', name: '我的车队', ico: 'menu-car-ico'
        },
      ]
    }
  },
  computed: {
    ...mapGetters({
      userInfo: 'getUserInfo'
    })
  }
};
</script>

<style scoped>
.personal-header {
  width: 1210px;
  margin: 40px auto 32px;
  padding: 0 52px;
  height: 163px;
  border-radius: 5px;
  background-color: rgb(255, 255, 255);
  box-shadow: 2.5px 4.33px 10px 0px rgba(0, 0, 0, 0.2);
}
.person-img-border {
  background: url("/static/images/person-border.png") no-repeat transparent;
  background-size: cover;
  width: 98px;
  height: 98px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-20px);
}
.personal-header-info {
  display: flex;
}
.personal-header-info .info {
  flex: 1;
  margin-left: 24px;
}
.info div {
  height: 22px;
  color: #313131;
  font-size: 20px;
  margin: 15px 0;
}
.info div span {
  font-size: 16px;
  color: #7d7d7d;
}
.person-img-border img {
  max-width: 96px;
  max-height: 96px;
  border-radius: 50%;
}
.person-tag {
  border-radius: 8px;
  height: 18px;
  font-size: 12px;
  color: #fff;
  padding: 0 6px;
  margin-right: 5px;
}
.tag-status {
  background-color: #ffbd01;
}
.tag-zhiwu1 {
  background-color: #ff25ff;
}
.tag-zhiwu2 {
  background-color: #f83b39;
}
.edit {
  font-size: 15px;
  color: #7d7d7d;
  line-height: 75px;
}
.edit span {
  vertical-align: middle;
}
.edit img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 4px;
}
.perosn-menu-icon {
  background: url("/static/images/menu-ico.png") no-repeat;
  width: 20px;
  height: 20px;
  display: inline-block;
  background-position-y: 6px;
}
.menu-my-ico {
  background-position-x: 0px;
}
.menu-yuyue-ico {
  background-position-x: -23px;
}
.menu-file-ico {
  background-position-x: -46px;
}
.menu-car-ico {
  background-position-x: -66px;
}
.personal-menu {
  display: flex;
  width: 604px;
  height: 36px;
  margin-top: 10px;
  justify-content: space-around;
}
.personal-menu li {
  width: 108px;
  height: 36px;
  line-height: 36px;
  cursor: pointer;
}
.personal-menu li.active {
  background-color: #0143a0;
  color: #fff;
  font-size: 15px;
  border-radius: 5px;
  padding-left: 14px;
}
.personal-menu li.active .perosn-menu-icon {
  background-position-y: -15px;
}
</style>